<!-- 停车场基础信息 -->

<template>
    <div class="d-flex w-100 h-100">
       <div style="width: 60%;height: 100%;">
           <div
     id="tccjcxx"
     class="w-100 "
     style="height: 90%; position: relative"
   ></div>  
       </div>
 
  <div style="width:40%;height: 100%;" >
   <fakeLenfend
      style="width:100%;height: 90%;"
       :color="colorList"
       :text="chartData.map((i:any) => i.name+'    '+i.value+'个')"
       :orient="'column'"
       >
    </fakeLenfend>
  </div>
   </div>
    
</template>
   
<script setup lang='ts'>
import * as echarts from "echarts";
import fakeLenfend from '@/components/project/fakeLegend.vue'

import { useConvert } from '@/hook/useConvert'
const props = defineProps({
    chartData: {
    type: Array,
    default: () => [],
  },
  total:{
    type: Number,
    default: 0,
  }
});
    const chartData=props.chartData.map((item:any)=>{ 
        return {
            name:item.name,
            value:Number(item.value)
        }
    })
    const colorList = ['#FBD8A0',
    '#96E0ED',
    '#60FFCE',
    '#E6FDFF',
    '#03E6FE',
    '#159AFF',
    '#FFC0CB', // 浅粉红
    '#FFD700', // 金色
    '#8A2BE2', // 蓝宝石色
 
]
    const sum = chartData.reduce((per, cur) => per + cur.value, 0)
    const gap = (1 * sum) / 100
    const pieData1 = []
    const pieData2 = []
    const gapData = {
        name: '',
        value: gap,
        itemStyle: {
            color: 'transparent'
        }
    }
    for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
            ...chartData[i],
            itemStyle: {
                borderRadius: 10
            }
        })
        pieData1.push(gapData)

        // 第二圈数据
        pieData2.push({
            ...chartData[i],
            itemStyle: {
                color: colorList[i],
                opacity: 0.21
            }
        })
        pieData2.push(gapData)
    }
    console.log(pieData2)

    let option = {  
        tooltip: {
            show: true,
            backgroundColor: 'rgba(0, 0, 0,.8)',
            textStyle: {
                color: '#fff'
            }
        },
        title: {
    text: "总数:"+props.total+"个",
    left: "20%",
    top: "39%",
    textStyle: {
      color: "#fff",
      fontSize: 20,
      align: "center",
    },
  },
        legend: {
            show: false,
            right: '2%',
            top: 'center',
            align: 'left',
            itemGap: 18,
            // icon: 'rect',
            itemWidth: 13,
            itemHeight: 7,
            // symbolKeepAspect: false,
            textStyle: {
                color: '#D8DDE3',
                rich: {
                    name: {
                        verticalAlign: 'right',
                        align: 'left',
                        width: 150,
                        fontSize: 14,
                        color: '#D8DDE3'
                    },
                    percent: {
                        padding: [0, 0, 0, 8],
                        color: '#D8DDE3'
                    }
                },
                borderWidth: 53 // 间距的宽度
            },
            formatter:( name:any) => {
     
                const item:any = chartData.find(i => {
                    return i.name === name
                })
                const p = ((item.value / sum) * 100).toFixed(0)
                return '{name|' + name + '}' + '{percent|' + p + '}' + '个'
            }
        },
        grid: {
            top: 35,
            right: 10,
            bottom: 20,
            left: 30
        },
        color: colorList,
        series: [
            {
                name: '',
                type: 'pie',
                roundCap: true,
                radius: ['66%', '70%'],
                center: ['36%', '45%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: true,
                length: 10,
                length2: 20,
                lineStyle: {
                    color: '#333',
                    width: 1
                }
                },
                data: pieData1
            },
            {
                type: 'pie',
                radius: ['66%', '54%'],
                center: ['36%', '45%'],
                gap: 1.71,
                label: {
                    show: false
                },
                labelLine: {
                    show: true,
                length: 10,
                length2: 20,
                lineStyle: {
                    color: '#333',
                    width: 1
                }
                },
                silent: true,
                data: pieData2
            },
            {
                type: 'pie',
                center: ['36%', '45%'],
                radius: [0, '45.6%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: 'rgba(75, 126, 203,.1)'
                },
                silent: true,
                data: [
                    {
                        value: 100,
                        name: ''
                    }
                ]
            }
        ]
    }

onMounted(() => {
    
 let myChart = echarts.init(
   document.getElementById("tccjcxx") as HTMLElement
 );

 myChart.setOption(option);
});
</script>



   
<style>
   
</style>